<template>
  <div class="wrap">
    <div class="header">

    </div>
    <div class="content">
      <el-tabs v-model="queryParams.tabType" @tab-click="changeOption">
        <el-tab-pane :label="`${$t('combination.待组装')}(${attrNumber(tabTypeNum.waitNum)})`" name="0"></el-tab-pane>
        <el-tab-pane :label="`${$t('combination.已组装')}(${attrNumber(tabTypeNum.finishNum)})`" name="1"></el-tab-pane>
      </el-tabs>
      <div class="table">
        <el-table
          border
          :data="tableData"
          :key="queryParams.tabType"
          v-loading="loading"
          v-tableHeight="{bottomOffset: 80}"
          height="100px"
          ref="tableData"
        >
          <el-table-column
            :label="$t('table.组装单号')"
            prop="combinationNo"
            align="center"
            min-width="250"
            show-overflow-tooltip
            fixed
          >
            <template slot-scope="{row}">
              <diy-link @click="jumpCombinationInfo(row.id)">{{row.combinationNo}}</diy-link>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.商品种数')"
            prop="skuNum"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.商品总数量')"
            prop="goodsNum"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.组装费用（元）')"
            prop="combinationFee"
            align="center"
            min-width="150"
            v-if="queryParams.tabType === '1'"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.createTime2')"
            prop="createTime"
            align="center"
            min-width="150"
          >
          </el-table-column>
          <el-table-column
            :label="$t('table.完成时间')"
            prop="pickedTime"
            align="center"
            min-width="150"
            v-if="queryParams.tabType === '1'"

          >
            <template v-slot="{row}">
              {{row.pickedTime || '-'}}
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.operate')"
            prop="operate"
            align="left"
            width="300"
            fixed="right"
          >
            <template v-slot="{row}">
              <el-button type="view" @click="jumpCombinationInfo(row.id)">{{$t('common.view')}}</el-button>
              <template v-if="row.shipmentId">
                <el-button type="primary" @click="jumpShipmentInfo(row.shipmentId,true)">
                  {{$t('shipment.货件单')}}
                </el-button>
              </template>
            </template>
          </el-table-column>



        </el-table>


        <div class="page-wrap mgt10">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :current-page.sync="queryParams.page"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="getData"
          >
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {attrNumber} from "@/utils/common";
import {getCombinationList} from "@/api/combination";
import {deepCopy} from "@/utils";
import {jumpCombinationInfo, jumpShipmentInfo} from "@/utils/jumpView";

export default {
  name: "combinationList",
  data(){
    return {
      queryParams: {
        status: 0,
        tabType: '0',
        page: 1,
        pageSize: 20,
      },
      total: 0,
      tabTypeNum: {
        waitNum: 0, // 待组装
        finishNum: 0, // 已组装
      },
      tableData: [],
      loading: false,
    }
  },
  created() {
    this.getData()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods: {
    jumpShipmentInfo,
    jumpCombinationInfo,
    attrNumber,
    getData(){
      this.loading = true
      getCombinationList(this.queryParams)
        .then(res=>{
          this.loading = false
          const {data, info} = res
          this.tableData = deepCopy(data)
          this.total = info.total
          this.tabTypeNum.waitNum = info.waitNum
          this.tabTypeNum.finishNum = info.finishNum
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    }
  },

}
</script>

<style scoped lang="scss">
.wrap{
  padding: 20px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 0px 0 0;
  }
}
</style>
